<!-- 周期配置主页列表 -->
<!-- cycleConfPage -->
<template>
    <div class="app-container"
         v-loading.fullscreen.lock="allLoading"
         element-loading-text="拼命处理中,请耐心等待"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)"
    >

        <!--    调用 geMainList   -->
        <el-table
            :rowKey="mainTable.rowKey"
            :ref="mainTable.uuid"
            v-if="mainTable.showTable" v-loading="mainTable.loading" :data="mainTable.list"   @selection-change="handleSelectionChange"
            :highlight-current-row="true"
            @row-click="rowClickMainTable"
            :row-style="rowStyleElTable"
            :element-loading-text="mainTable.elementLoadingText"
            :default-expand-all="mainTable.defaultExpandAll"
        >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column type="index" label="序号" align="center"/>
            <el-table-column  label="人员ID" prop="personId" align="center"   />
            <el-table-column  label="描述" prop="description" align="center"   />
            <el-table-column  label="年龄" prop="age" align="center"   />
        </el-table>


    </div>
</template>

<script>
import 'element-ui/lib/theme-chalk/index.css';

import {sksPageMixin} from "/lib/sks-page";
import {sksMockPageMixin} from "/lib/sks-mock";
export default {
    name: "Page40",
    mixins: [
        sksMockPageMixin,
        sksPageMixin,
    ],
    components: {
    },
    data() {
        return {
        };
    },
    methods: {
        rowStyleElTable(params){
            this.sksUtils.rowStyleElTable(params)
        },
        initMockParam(){
            return {
                'list|100':[{
                    personId: '@id',
                    description: '@cname',
                    'age|20-30': 23,
                    'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师'],
                    remark: '@ctitle(2,4)'
                }],
                total: 100,
            }
        },
        initMainTableParam(){
            return {
                //业务名称,通常用业务表名
                ownerName: `person`,
                uniqueId: 'personId',

                //表列 会根据 sksAppName 自动查询后台配置
                tableColumnList: [],

                //使用 tableColumnList 渲染
                tableColumnListEnable: false,

                //搜索字段 会根据 sksAppName 自动查询后台配置
                queryParamsColumnList: [],
                //使用 queryParamsColumnList 渲染
                queryParamsColumnListEnable: false,

            }
        },
        getMainList(){
            let queryParams = this.mainTable.queryParams;

            this.sksUtils.resetSksTableBefore(this.mainTable)


            //模拟数据进行分页展示
            let mockPage = this.mockPagingList(queryParams);
            // console.log("mockPage.queryParams.pageNum pageSize",queryParams.pageNum,queryParams.pageSize)
            // console.log("mockPage",mockPage)
            let saRes={
                data:  mockPage,
            }

            this.sksUtils.setSksTableDataByPage(this.mainTable,saRes.data)

        },
        rowClickMainTable(row){
            this.mainTable.currentRow=row
            this.$emit('rowClickAfter',row)
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.mainTable.selection=selection
            this.mainTable.ids = selection.map(item => item[this.mainTable.uniqueId]);
            this.mainTable.single = selection.length != 1;
            this.mainTable.multiple = !selection.length;
            this.$emit('selectionChangeAfter',selection)
        },
    },
};
</script>

<style>
/*//高亮点击的行*/
.el-table__body tr.current-row>td {
//background: rgb(77, 195, 255, 0.5) !important;
    background-color: #DCDCDC !important;
    color: #000000;
}
/*//鼠标滑过时高亮行*/
.el-table__body tr:hover>td{
//background: rgb(77, 195, 255, 0.2);
    background-color: #d7dcdc !important;
//background: none;
}

.el-table__header-wrapper>table {
    border-collapse: collapse;
    /* margin: 1rem 0; */
    margin: 0px;
    display: block;
    overflow-x: auto;
}

.el-table__body-wrapper>table {
    border-collapse: collapse;
    /* margin: 1rem 0; */
    margin: 0px;
    display: block;
    overflow-x: auto;
}
</style>
